<template>
    <div class="container w1200">
        <ul class="header">
            <li v-for="(item, index) in setpList" :key="index" :class="{ active: currentList.includes(index + 1) }">
                <i>{{ index + 1 }}</i>
                <span>{{ index === 2 ? (awaitState ? item : reject ? '审核失败' : '审核成功') : item }}</span>
            </li>
        </ul>
        <div v-if="reject" class="reject">
            <!--            <a-icon type="exclamation-circle" />-->
            <img src="@/assets/images/login/icon.png" alt="" />
            <p>
                您的企业认证<i>审核失败</i> ，原因是:{{ auditContent }}
                <a-button v-if="auditImgList.length > 0" type="link" @click="showPicturesModal(auditImgList)">
                    图片说明
                </a-button>
                ，请确认提交审核资料符合标准后，再次提交审核
            </p>
        </div>
        <div class="content">
            <div class="title">
                <h4>企业实名认证</h4>
                <p>
                    请确保您是具有法人资格的商户，您需提供可证明您依法设立、依法经营，开展社会活动的执照、证件等（如营业执照副本）
                </p>
            </div>
            <div class="form-group" v-if="current === 1">
                <a-form-model ref="ruleForm" :model="formData" :rules="rules">
                    <a-form-model-item label="企业名称" prop="name">
                        <a-input v-model="formData.name" placeholder="必须填写营业执照上的企业名称全称" />
                    </a-form-model-item>
                    <a-form-model-item label="营业执照注册号" prop="licenseCode">
                        <a-input v-model="formData.licenseCode" placeholder="必须为18位数字和字母(大写)" />
                    </a-form-model-item>
                    <a-form-model-item label="营业期限" extra="若无营业期限则选择长期" required>
                        <a-date-picker
                            v-model="formData.term"
                            format="YYYY-MM-DD"
                            valueFormat="YYYY-MM-DD"
                            placeholder="请选择日期"
                            :show-today="false"
                            @focus="dateFocus"
                        />
                        <a-radio-group v-model="formData.termType">
                            <a-radio :value="2" @focus="focusRadio"> 长期 </a-radio>
                        </a-radio-group>
                    </a-form-model-item>
                    <a-form-model-item label="营业执照副本扫描件" class="upload" required>
                        <p slot="extra" class="tips">
                            1、请上传由中国大陆工商局颁发的，在有效期内且年检章齐全（当年成立的公司可无年检章）的证件图片<br />
                            2、请提供清晰、完整的彩色原件扫描件或数码照<br />
                            3、证件必须是彩色原件电子版，可以是扫描件或者数码拍摄照片<br />
                            4、仅支持.jpg .bmp .png .gif的图片格式，图片大小不超过4M
                        </p>
                        <custom-upload
                            :typeList="typeList"
                            :path="path"
                            :max="1"
                            :watermark='true'
                            btnText="点击上传"
                            v-model="licensePictureList"
                        ></custom-upload>
                    </a-form-model-item>
                    <a-form-model-item class="required">
                        <p slot="help" class="tip">
                            <a-icon type="exclamation-circle" />
                            <span>请认真阅读用户协议并勾选</span>
                        </p>
                        <div>
                            <a-checkbox-group v-model="formData.OK" button-style="solid">
                                <a-checkbox value="1"> </a-checkbox>
                            </a-checkbox-group>
                            <div class="agreement">
                                我已阅读<font @click="show = true"> 《天作云认证服务用户协议》 </font>
                            </div>
                        </div>
                    </a-form-model-item>
                </a-form-model>
                <div class="btn">
                    <a-button
                        type="primary"
                        @click="
                            () => {
                                $router.push('/settled')
                            }
                        "
                    >
                        上一步
                    </a-button>
                    <a-button type="primary" @click="onSubmit"> 提交并保存信息 </a-button>
                </div>
            </div>
            <div v-if="current === 2" class="await-calss">
                <div>
                    <img src="~@/assets/images/state-icon.png" alt="" />
                    <p>
                        审核资料已提交，请耐心等候
                        <br />审核结果将以短信通知
                    </p>
                </div>
            </div>
            <div v-if="current === 3" class="await-calss">
                <div>
                    <img src="~@/assets/images/state-icon.png" alt="" />
                    <p>
                        恭喜您！您的企业入驻认证审核已通过
                        <br />欢迎您入驻乡村资源管理服务平台！即刻前往服务商工作台，完善企业资料，让政府更快找到你
                    </p>
                    <a-button type="primary" @click="handleJump" class="jump-btn"> 服务商工作台 </a-button>
                </div>
            </div>
        </div>
        <a-modal class="rich-text" :visible="show" :footer="null" @cancel="show = false" width="700px">
            <p class="ql-align-center">
                <strong style="color: rgb(51, 51, 51)">天作云平台服务商入驻协议</strong>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51)"
                >本协议由同意并承诺遵守本协议规定且使用天作云平台服务的用户（下称“服务商”）、天作云平台（运营主体为成都天作云科技有限公司，下称“平台”）共同缔结，本协议具有合同法律效力。</span>
            </p>
            <p>
                <strong
                    style="color: rgb(51, 51, 51)"
                >服务商在使用平台相关服务时，须自行阅读本协议，尤其是做出加黑、斜体、下划线处理的相关条款，可能会对服务商的相关权益造成重大影响，请谨慎阅读。</strong>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51)"
                >为共同构建诚信、透明的网络消费环境，共同维护公平、规范的网络经营秩序，共同促进平台生态系统的健康持续发展，在本协议约束下平台提供店铺相关服务，服务商在平台开设虚拟店铺正常开展经营活动。服务商需始终恪守诚信经营承诺，积极维护国家法律法规及平台的相关规定，严格遵守平台已经发布、即将发布的各项规则，诚信、公平、规范地开展经营活动。</span>
            </p>
            <p>
                <strong style="color: rgb(51, 51, 51)">一、 协议内容及生效：</strong>
            </p>
            <p>
                <span style="color: rgb(51, 51, 51)">（一）</span><strong
                    style="color: rgb(51, 51, 51)"
                >本协议内容包括协议正文及平台所有已发布的或将来可能发布的各类规则。所有规则为本协议不可分割的一部分，与本协议正文具有同等法律效力。</strong>
            </p>
            <p>
                <strong
                    style="color: rgb(51, 51, 51)"
                >（二）服务商在使用平台提供的各项服务时，承诺接受并遵守各项相关规则的规定。平台有权单方进行变更本协议内容、调整交易流程、变更交易规则等行为，变更后的协议和规则一经在站内信或公告公布后，立即在站内信或公告明确的特定时间自动生效。若服务商在前述变更站内信或公告后继续使用平台服务的，即表示已经阅读、理解并接受经修订的协议和规则。若服务商不同意相关变更，应当立即停止使用平台服务。</strong>
            </p>
            <p>
                <strong style="color: rgb(51, 51, 51)">二、定义及解释</strong>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51)"
                >入驻：指服务商注册完成，依据平台入驻流程和要求进行开通店铺的过程。</span>
            </p>
            <p>
                <strong style="color: rgb(51, 51, 51)">三、服务商入驻条件及证明文件</strong>
            </p>
            <p>
                <span style="color: rgb(51, 51, 51)">（一）服务商在平台入驻，须满足以下条件：</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51)"
                >1、年满18岁并具有民事权利能力和民事行为能力的自然人或依照中华人民共和国法律注册并领取合法有效的营业执照及其他经营许可的法人或者非法人组织。。</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51)"
                >2、有良好的信誉，能提供优质服务，有能力履行合同与提供良好的售后服务。</span>
            </p>
            <p>
                <span style="color: rgb(51, 51, 51)">3、同意本协议及平台相关规则</span>
            </p>
            <p>
                <span style="color: rgb(51, 51, 51)">（二）证明文件提交：</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51)"
                >1、服务商须根据平台相关规则及要求向平台提交证明文件或其他相关证明，包括但不限于营业执照、法定代表人身份证明（含法定代表人身份证复印件）、行政许可等彩色复印件。</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51)"
                >2、服务商保证向平台提供的上述证明文件或其他相关证明真实、合法、准确、有效，并保证上述证明文件或其他相关证明发生任何变更或更新时，及时在平台更新。</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51)"
                >3、服务商须根据《中华人民共和国电子商务法》规定的市场主体登记相关要求办理市场主体登记，
                    按照《中华人民共和国电子商务法》不需要办理市场主体登记的，需要进行说明，并保证说明情况真实。</span>
            </p>
            <p>
                <strong
                    style="color: rgb(51, 51, 51)"
                >4、服务商对其提交的证明文件或其他相应证明的真实性、合法性、准确性、有效性承担全部法律责任，若因服务商提交虚假、过期文件或未及时更新证明文件或通知导致纠纷或被相关国家机关处罚的，由服务商独立承担全部法律责任，如因此造成天作云平台（包括“天作云平台”合作方、代理人或职员）损失的，服务商应予以赔偿。</strong>
            </p>
            <p>
                <strong style="color: rgb(51, 51, 51)">四、服务商入驻流程</strong>
            </p>
            <p>
                <span style="color: rgb(51, 51, 51)">服务商应当完成以下流程，方可在平台正常经营店铺：</span>
            </p>
            <p>
                <span style="color: rgb(51, 51, 51)">（一）服务商已同意并签署本协议。</span>
            </p>
            <p>
                <span style="color: rgb(51, 51, 51)">（二）服务商已完善店铺信息（店铺资料和擅长技能必填）。</span>
            </p>
            <p>
                <span style="color: rgb(51, 51, 51)">（三）服务商已完成店铺实名认证。</span>
            </p>
            <p>
                <span style="color: rgb(51, 51, 51)">服务商完成以上全部事项，即入驻成功，可开始正常经营。</span>
            </p>
            <p><strong style="color: rgb(51, 51, 51)">五、平台费用</strong></p>
            <p><span style="color: rgb(51, 51, 51)">（一）暂无费用</span></p>
            <p>
                <strong style="color: rgb(51, 51, 51)">六、双方权利及义务</strong>
            </p>
            <p>
                <span style="color: rgb(51, 51, 51)">（一）服务商在入驻成功后可免费享受平台基础功能及相关服务。</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51)"
                >（二）服务商应妥善保管天作云平台账号，如因服务商保管、设置或使用不当造成的损失，由服务商自行承担责任。</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51)"
                >（三）平台根据本协议向服务商提供电子商务交易平台及相应技术支持服务，尽力维护平台的正常稳定运行，并努力改进技术，对平台功能及服务进行更新、升级，不断提升平台性能和交易效率。</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51)"
                >（四）平台有权将经国家生效法律文书或行政文书确定的服务商违法违规事件，或平台已确认的服务商违反本协议相关约定的事项，在平台上予以公示。</span>
            </p>
            <p>
                <span style="color: rgb(51, 51, 51)">（五）</span><strong
                    style="color: rgb(51, 51, 51)"
                >平台提供的直接订单或订单机会均必须按照平台交易流程操作，服务商承诺不进行线下交易、虚假交易和出售违法违规的服务。</strong>
            </p>
            <p>
                <strong
                    style="color: rgb(51, 51, 51)"
                >（六）服务商保证其所有服务内容应完全符合中国有关法律、法规、行政规章等的规定。如因服务商违反上述规定给平台或者雇主带来任何损害，服务商应承担所有法律责任并赔偿由此给平台或雇主造成的损失。</strong>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51)"
                >（七）平台有权利对服务商提供的相关资质文件及各类信息资料进行审核。审核通过并不代表平台对审核内容的真实性、合法性、准确性、及时性的确认，服务商仍须对其提交的资料的真实性、合法性、准确性、及时性等承担相应的法律责任。</span>
            </p>
            <p>
                <span style="color: rgb(51, 51, 51)">（八）</span><strong
                    style="color: rgb(51, 51, 51)"
                >平台有权对服务商的注册信息、上传的相关数据信息、在平台发布的其他信息及交易行为进行监督检查，对发现的违法违规信息及其相关内容，服务商同意平台不经通知可立即删除，对发现的其他问题或疑问有权向服务商发出询问及要求改正的通知，服务商应在接到通知后立即做出说明或改正。对服务商前述不当行为，平台有权追究其违约、侵权责任并/或解除本协议。</strong>
            </p>
            <p>
                <span style="color: rgb(51, 51, 51)">（九）</span><strong
                    style="color: rgb(51, 51, 51)"
                >如因服务商服务内容、发布的信息或提供的售后服务问题而引发雇主对服务商及/或平台的诉讼，
                    平台有权披露服务商为实际服务提供商，服务商应承担因客户诉讼而产生的全部法律责任，如因此而给平台造成损失的，平台有权要求服务商承担赔偿责任。</strong>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51)"
                >（十）服务商在平台上交易过程中与雇主发生交易纠纷时，一旦服务商或雇主的任一方或双方共同提交平台要求调处，则平台作为独立第三方，有权根据平台相关规定进行处理。</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51)"
                >（十二）平台有权要求服务商提供与服务商服务内容、售后服务等相关的信息，以便于雇主直接向平台进行咨询时予以回复，对于平台无法回答或属服务商掌握的情况，平台有权要求服务商在指定的时限内予以回复或给出相应方案，对服务商未及时解决的客户咨询及投诉，平台有权对服务商采取相应处理措施。</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51)"
                >（十三）服务商自行终止经营店铺时，应当提前三十日在店铺首页显著位置持续公示有关信息。</span>
            </p>
            <p><strong style="color: rgb(51, 51, 51)">七、保密条款</strong></p>
            <p>
                <span
                    style="color: rgb(51, 51, 51)"
                >（一）服务商不得向与平台构成商业竞争关系的企业、商业机构或者组织提供其他服务商、雇主及平台的相关信息或者资料，否则服务商应承担一切责任。</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51)"
                >（二）服务商应告知并督促其因履行本协议之目的而必须获知本协议内容及因合作而获知相关商业秘密的雇员、代理人、顾问等遵守保密条款，并对其雇员、代理人、顾问等的行为承担责任。</span>
            </p>
            <p>
                <strong style="color: rgb(51, 51, 51)">八、平台责任范围和责任限制</strong>
            </p>
            <p>
                <span style="color: rgb(51, 51, 51)">（一）</span><strong
                    style="color: rgb(51, 51, 51)"
                >平台将在现有技术的基础上尽合理努力提供相应的安全措施，以保障本协议项下的服务安全和正常运行。但由于可能存在的计算机病毒、网络通讯故障、系统维护等方面的因素，以及可能发生的不可抗力事件，平台在此明确声明，对服务不作任何明示或暗示的保证，包括但不限于对服务的可适用性、没有错误或疏漏、持续性、准确性、可靠性、适用于某一特定用途。</strong>
            </p>
            <p>
                <span style="color: rgb(51, 51, 51)">（二）</span><strong
                    style="color: rgb(51, 51, 51)"
                >本协议的签署、服务商的入驻并不意味着平台对服务商的身份、履约能力、服务发布、交易等行为或服务商自行上传的信息的真实性、准确性、合法性、有效性和完整性承担任何明示或暗示的保证或担保等责任，也不意味着平台成为服务商与用户之间交易的参与方。因服务商的行为导致的任何投诉、纠纷、争议、赔偿等，服务商应以自己的名义独立承担所有法律责任。</strong>
            </p>
            <p>
                <strong
                    style="color: rgb(51, 51, 51)"
                >（三）平台只是为服务商提供一个信息服务交易的平台，对于雇主所发布的需求的合法性、真实性及其品质，以及服务商履行交易的能力等，平台一律不负任何担保责任。</strong>
            </p>
            <p><strong style="color: rgb(51, 51, 51)">九、违约责任</strong></p>
            <p>
                <strong
                    style="color: rgb(51, 51, 51)"
                >（一）服务商提供虚假、失效的证明文件（包括其他相关证明）或存在欺诈等不正当行为，平台有权终止本协议并关闭服务商店铺，服务商自行承担一切责任和损失，如因服务商的前述行为对平台或第三方造成损失的，服务商应当承担赔偿责任。</strong>
            </p>
            <p>
                <span style="color: rgb(51, 51, 51)">（二）</span><strong
                    style="color: rgb(51, 51, 51)"
                >服务商在平台发布错误、虚假、违法及不良信息，给平台造成任何损失的（损失包括但不限于诉讼费、律师费、赔偿、补偿、行政机关处罚、差旅费等），服务商须应当承担赔偿责任；</strong>
            </p>
            <p>
                <span style="color: rgb(51, 51, 51)">（三）</span><strong
                    style="color: rgb(51, 51, 51)"
                >服务商不论采取何种方式将平台用户吸引到其他平台或场所进行交易或绕开平台指定付款方式进行交易，平台有权终止本协议，并有权关闭服务商在平台的全部店铺。；</strong>
            </p>
            <p>
                <strong
                    style="color: rgb(51, 51, 51)"
                >（四）服务商不论采取何种方式非法获取平台系统数据，利用平台谋取不正当利益或从事非法活动的，</strong><span style="color: rgb(51, 51, 51)">&nbsp;</span><strong style="color: rgb(51, 51, 51)">平台有权终止本协议，并有权关闭服务商在平台的全部店铺。</strong>
            </p>
            <p>
                <strong
                    style="color: rgb(51, 51, 51)"
                >（五）服务商违反本协议时，服务商除承担违约责任外，平台有权视情节严重程度采取暂停向服务商提供服务、暂时关闭服务商店铺、暂缓未结算款项直至解除本协议等措施。</strong>
            </p>
            <p>
                <strong style="color: rgb(51, 51, 51)">十、法律适用及争议解决</strong>
            </p>
            <p>
                <strong
                    style="color: rgb(51, 51, 51)"
                >本协议及与本协议有关的一切争议、解释等，均适用中华人民共和国法律（不含港澳台地区法律）。</strong>
            </p>
            <p>
                <strong
                    style="color: rgb(51, 51, 51)"
                >本协议发生争议时，应友好协商解决；如果协商不成，双方一致同意提交重庆仲裁委员会按照其仲裁规则进行裁决。仲裁为一裁终局，对双方均具有约束力。。</strong>
            </p>
            <p>
                <strong style="color: rgb(51, 51, 51)">十一、其他约定</strong>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51)"
                >（一）本协议的任何一方未能及时行使本协议项下的权利不应被视为放弃该权利。</span>
            </p>
            <p>
                <span
                    style="color: rgb(51, 51, 51)"
                >（二）本协议中的任何条款无论因何种原因完全或部分无效或不具有执行力，或违反任何适用的法律，则该条款被视为删除，但本协议的其余条款仍有效并且有约束力。</span>
            </p>
            <p>&nbsp;</p>
            <p class="ql-align-center">&nbsp;</p>
            <p>&nbsp;</p>
        </a-modal>
    </div>
</template>

<script>
import { localStorage } from '~/plugins/tools'
export default {
    name: 'CompanyAuth',
    layout: 'no-menu',
    data () {
        return {
            setpList: ['填写信息', '等待审核', '审核结果'],
            currentList: [1],
            current: 1,
            formData: {
                name: '',
                licenseCode: '',
                term: '',
                termType: '',
                OK: []
            },
            rules: {
                name: [
                    {
                        required: true,
                        message: '请输入企业名称',
                        trigger: 'blur'
                    },
                    {
                        min: 1,
                        max: 40,
                        message: '企业名称40字以内',
                        trigger: 'blur'
                    }
                ],
                licenseCode: [
                    {
                        required: true,
                        message: '请输入营业执照注册号',
                        trigger: 'blur'
                    }
                ]
            },
            path: '/company-certification/img/',
            licensePictureList: [],
            typeList: ['image/jpeg', 'image/png', 'image/gif', 'image/bmp'],
            reject: false,
            awaitState: true,
            auditContent: '',
            auditImgList: [],
            show: false
        }
    },
    created () {
        if (process.client && localStorage.getItem('refresh') === 'refresh') {
            localStorage.removeItem('refresh')
            window.location.reload()
        }
    },
    mounted () {
        this.getDetail()
    },
    methods: {
        dateFocus () {
            this.formData.termType = ''
        },
        focusRadio () {
            this.formData.term = ''
        },
        onSubmit () {
            if (!this.formData.termType && !this.formData.term) {
                return this.$message.error('请输入或者选择营业期限')
            }
            if (!this.licensePictureList.length) {
                return this.$message.error('请上传营业执照副本扫描件')
            }
            if (!this.formData.OK.length) {
                return this.$message.error('请勾选天作云认证服务用户协议')
            }
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    const { name, licenseCode, term } = this.formData
                    this.$ApiServer['company/authentication']({
                        name,
                        licenseCode,
                        orgCategoryId: 4, // 默认是服务商
                        term: term || null,
                        termType: term ? 1 : 2,
                        licensePicture: this.licensePictureList.join(',')
                    }).then((res) => {
                        if (res.code === 200) {
                            this.$message.success('提交成功')
                            this.reject = false
                            this.current = 2
                            this.currentList = [1, 2]
                        } else {
                            this.$message.error(res.message)
                        }
                    })
                } else {
                    return false
                }
            })
        },
        async getDetail () {
            const res = await this.$ApiServer['company/authentication/detail']()
            if (res.code === 200) {
                this.formData = {
                    name: res.data.name,
                    licenseCode: res.data.licenseCode,
                    term: res.data.term || '',
                    termType: res.data.termType,
                    OK: ['1']
                }
                this.licensePictureList = [res.data.licensePicture]
                if (res.data.state === 0) {
                    this.current = 2
                    this.currentList = [1, 2]
                }
                if (res.data.state === 1) {
                    this.current = 3
                    this.awaitState = false
                    this.currentList = [1, 2, 3]
                }
                if (res.data.state === 2) {
                    this.reject = true
                    this.awaitState = false
                    this.current = 1
                    this.currentList = [1, 2, 3]
                    this.auditContent = res.data.auditVo.auditContent
                    this.auditImgList = res.data.auditVo.auditImgList || []
                }
            } else {
                return false
            }
        },
        showPicturesModal (urls) {
            this.$picturesModal({ urls })
        },
        async getCompanyState () {
            const res = await this.$ApiServer['company/state/info']()
            if (res.code === 200) {
                return res.data
            }
        },
        async handleJump () {
            const res = await this.$ApiServer['company/complete']()
            if (res.code === 200) {
                const userInfo = localStorage.getItem('userInfo')
                const result = await this.getCompanyState()
                localStorage.setItem('companyAuth', result)
                const resp = await this.$ApiServer['user/refresh']({
                    refreshToken: userInfo.refreshToken
                })
                if (resp.code === 200) {
                    this.$store
                        .dispatch('user/setUserInfo', resp.data)
                        .then(() => {
                            this.$router.push('/company-manage/company-info')
                        })
                        .catch(() => {
                            this.$message.error('跳转失败，请重新登陆')
                            this.$store.dispatch('user/logout')
                        })
                } else {
                    this.$message.error('跳转失败，请重新登陆')
                    this.$store.dispatch('user/logout')
                }
            }
        }
    }
}
</script>

<style lang="less" scoped>
.container {
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
    .header {
        background-color: #ffffff;
        width: 100%;
        height: 0.8rem;
        display: flex;
        justify-content: space-between;
        margin-bottom: 0;
        border-radius: 0.06rem;
        li {
            width: calc(100% / 3);
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            &.active {
                i {
                    background: linear-gradient(270deg, #64e99f 0%, #009944 100%);
                    color: #ffffff;
                    border: none;
                }
                span {
                    color: @primary-color;
                }
            }
            i {
                width: 0.32rem;
                height: 0.32rem;
                background: #ffffff;
                border: 1px solid #666666;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 0.2rem;
                font-family: DIN;
                font-weight: bold;
                color: #666666;
                margin-right: 0.1rem;
            }
            span {
                font-size: 0.14rem;
                color: #666666;
            }
            & + li {
                border-left: 1px solid #f3f3f3;
            }
        }
    }
}

.content {
    margin-top: 0.1rem;
    background-color: #ffffff;
    padding: 0.11rem 0.2rem 1.17rem 0.2rem;
    border-radius: 0.06rem;
    min-height: calc(100vh - 0.76rem - 0.1rem - 0.8rem - 0.11rem - 0.1rem - 1.53rem);
    position: relative;
    .title {
        display: flex;
        h4 {
            font-size: 0.16rem;
            color: @primary-color;
            font-weight: bold;
            line-height: 0.22rem;
            position: relative;
            &::after {
                content: '';
                width: 100%;
                height: 1px;
                background-color: @primary-color;
                position: absolute;
                top: -0.11rem;
                left: 0;
            }
        }
        p {
            color: #666666;
            font-size: 0.12rem;
            line-height: 0.22rem;
            margin-left: 0.1rem;
        }
    }
    .form-group {
        .btn {
            padding-left: 1.6rem;
            display: flex;
            justify-content: flex-start;
            margin-top: 0.18rem;
        }
        button {
            border-radius: 0.02rem;
            & + button {
                margin-left: 20px;
            }
        }
    }
    .await-calss {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        div {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        img {
            width: 3.47rem;
            height: 1.88rem;
        }
        P {
            text-align: center;
            color: #333333;
            margin-top: 0.3rem;
            font-size: 0.18rem;
            font-weight: bold;
            line-height: 0.25rem;
        }
    }
}

.ant-form {
    padding-left: 0.15rem;
    margin-top: 0.2rem;
    ::v-deep {
        .ant-form-item {
            display: flex;
            .ant-radio-inner {
                border-color: @primary-color;
                &::after {
                    background-color: @primary-color;
                }
            }
            .ant-checkbox-inner {
                border-color: @primary-color;
            }
            .ant-radio-checked {
                .ant-checkbox-inner {
                    background-color: @primary-color;
                    border-color: @primary-color;
                    &::after {
                        background-color: @primary-color;
                    }
                }
                &::after {
                    border: 1px solid @primary-color !important;
                }
            }
            .ant-radio-wrapper:hover .ant-radio,
            .ant-radio:hover .ant-radio-inner,
            .ant-radio-input:focus + .ant-radio-inner {
                border-color: @primary-color;
            }
            .ant-checkbox-checked {
                .ant-checkbox-inner {
                    border-color: @primary-color;
                    background-color: @primary-color;
                }
                &::after {
                    border-color: @primary-color;
                }
                &:hover {
                    .ant-checkbox-inner {
                        border-color: @primary-color;
                    }
                }
            }
            .ant-checkbox-wrapper:hover .ant-checkbox-inner,
            .ant-checkbox:hover .ant-checkbox-inner,
            .ant-checkbox-input:focus + .ant-checkbox-inner {
                border-color: @primary-color;
            }
            &.upload {
                .ant-form-item-control {
                    display: flex;
                    flex-direction: column-reverse;
                    position: relative;
                    .ant-form-explain {
                        position: absolute;
                    }
                }
            }
            &.ID-upload {
                height: 1.5rem;
                .ant-form-item-children {
                    display: flex;
                }
            }
            .ant-upload.ant-upload-select.ant-upload-select-picture-card {
                width: 2.03rem;
                height: 1.5rem;
                background-color: #ffffff;
                border-color: #d4d4d4;
                border-style: solid;
                &:hover {
                    border-color: @primary-color;
                    border-style: solid;
                    .anticon-cloud-upload svg {
                        color: @primary-color;
                    }
                    .ant-upload-text {
                        color: @primary-color;
                    }
                }
                .anticon-cloud-upload svg {
                    width: 0.42rem;
                    height: 0.3rem;
                    color: #666666;
                }
                .ant-upload-text {
                    color: #666666;
                    font-size: 0.14rem;
                }
            }
            &-label {
                width: 170px;
                display: flex;
                justify-content: flex-end;
                font-weight: 400;
                font-size: 0.14rem;
            }
            &-control-wrapper {
                .ant-form-item-children > .ant-input {
                    width: 3rem;
                }
                .ant-form-extra {
                    font-size: 0.12rem;
                    color: #666666;
                    .tips {
                        margin-top: 0.05rem;
                        margin-bottom: 0.1rem;
                    }
                }
                .ant-calendar-picker {
                    margin-right: 0.1rem;
                    width: 2.03rem;
                }
                span.ant-radio + * {
                    padding-left: 0;
                }
            }
            .ant-upload-list-picture-card-container {
                width: 2.03rem;
                height: 1.5rem;
            }
            .ant-upload-list-picture-card .ant-upload-list-item {
                width: 2.03rem;
                height: 1.5rem;
            }
            &.required {
                padding-left: 1.5rem;
                .ant-form-item-children > div {
                    display: flex;
                    align-items: center;
                    .agreement {
                        margin: 0;
                        padding-left: 0.1rem;
                        font-size: 0.14rem;
                        color: #333333;
                        font {
                            color: @primary-color;
                            cursor: pointer;
                        }
                    }
                }
                .tip {
                    color: #f3993c;
                    display: flex;
                    align-items: center;
                    span {
                        margin-left: 0.1rem;
                    }
                    svg {
                        width: 0.2rem;
                        height: 0.2rem;
                    }
                }
            }
            .has-error {
                .ant-upload.ant-upload-select.ant-upload-select-picture-card {
                    border-color: @primary-color !important;
                    .anticon-cloud-upload svg {
                        color: @primary-color !important;
                    }
                    .ant-upload-text {
                        color: @primary-color !important;
                    }
                }
            }
        }

        .ant-form-item-required::before {
            color: @primary-color;
        }

        .ant-upload-list-picture-card-container {
            border-radius: 0.04rem;
        }

        .ant-upload-list-picture .ant-upload-list-item,
        .ant-upload-list-picture-card .ant-upload-list-item {
            padding: 0;
        }
    }
}

.reject {
    display: flex;
    align-items: center;
    width: 100%;
    height: 0.3rem;
    background: #ddf7e9;
    font-size: 0.12rem;
    padding-right: 0.2rem;
    padding-left: 0.2rem;
    & > img {
        width: 0.15rem;
        height: 0.15rem;
        margin-right: 0.1rem;
    }
    ::v-deep {
        .anticon {
            width: 0.15rem;
            height: 0.15rem;
            color: @primary-color !important;
            vertical-align: 0;
            margin-right: 0.06rem;
            margin-top: 0.01rem;
        }
        p {
            margin-bottom: 0;
            color: #333333;
            i {
                color: @primary-color;
            }
            button {
                padding: 0;
                height: inherit;
                width: 48px;
                display: inline;
                line-height: inherit;
            }
        }
    }
    button {
        font-size: 0.12rem;
        color: @primary-color;
    }
}

.jump-btn {
    border-radius: 0.02rem;
    margin-top: 0.4rem;
}

.rich-text {
    ::v-deep {
        .ant-modal-body {
            height: 700px;
            overflow-y: auto;
            .ql-align-center {
                text-align: center;
                font-size: 20px;
                font-weight: bold;
            }
        }
    }
}
</style>
